<template>
  <div>
    <div class="top">
      <div class="main">
        <div class="img_logo">
          <img src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/jobManager/logo.png"/>
          <span>—就业信息平台</span>
        </div>

        <div class="deng_lu">
          <ul>
            <li>
              <router-link to="/search">
                <img src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/jobManager/sousuo.png" width="25" height="25">
              </router-link>
            </li>
            <li v-if="!loginState">
              <router-link to="/login">
                <el-button size="mini" plain  icon="el-icon-s-custom">登录</el-button>
              </router-link>
            </li>

            <li v-else>
              <router-link to="/home">
             <el-button size="mini" plain icon="el-icon-s-home">管理中心</el-button>
              </router-link>
            </li>

            <li>

              <el-button  size="mini" plain @click="goCompanyRegisterRouter()"  icon="el-icon-share">单位注册</el-button>
            </li>

            <li>
              <el-button size="mini" plain  icon="el-icon-platform-eleme">微信小程序</el-button>
            </li>


          </ul>
        </div>
      </div>
    </div>

    <div class="nav">
      <div class="main">
        <ul>
          <li>
            <el-dropdown :show-timeout="0"	>
              <router-link to="/index" >
                <span class="el-dropdown-link">主页</span>
              </router-link>
            </el-dropdown>
          </li>
          <li v-for="(item,index) in channelList "  :key="item.id">
            <el-dropdown trigger="hover"  :show-timeout="0"	>
                <span class="el-dropdown-link">{{item.name}}</span>
              <el-dropdown-menu slot="dropdown" :key="index" trigger="hover"  :show-timeout="0"	>
                <template  v-for="(item2,index) in item.children" >
                  <router-link :to="`/front/newList/${item2.id}`">
                    <el-dropdown-item>{{item2.name}}</el-dropdown-item>
                  </router-link>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </li>

          <!--二级导航下拉菜单-->
          <li>
            <el-dropdown :show-timeout="0"	>
                <span class="el-dropdown-link">就业工作</span>
                <el-dropdown-menu slot="dropdown" trigger="hover"  :show-timeout="0"	>
                  <router-link to="/front/postList">
                    <el-dropdown-item>招聘岗位</el-dropdown-item>
                  </router-link>
                    <router-link to="/front/companyList">
                      <el-dropdown-item>用人单位</el-dropdown-item>
                    </router-link>
                  <router-link to="/front/postListByOrder">
                    <el-dropdown-item>岗位分类</el-dropdown-item>
                  </router-link>
                </el-dropdown-menu>
            </el-dropdown>
          </li>

        </ul>
      </div>
    </div>
    <!--导航区域-->
  </div>
</template>

<script>

import {getChannelTree} from '@/api/channel';
import { getToken } from '@/utils/auth';
export default {
  name: "Header",
  data() {
    return {
      channelList:[],//二级导航栏
      activeName: 'first',
    };
  },
  computed:{
    loginState(){
      if (getToken()){
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.getChannelTree()
  },
  methods:{
    //获取全部咨询分类树的方法
    getChannelTree(){
      getChannelTree().then(res=>{
        this.channelList = res.data;
      });
    },
    //跳转到单位注册路由
    goCompanyRegisterRouter(){
      this.$router.push('/front/companyRegister')
    }


  }
}
</script>

<style scoped>
/*增强饿了么二级下拉框*/
.el-dropdown-link {
  color: #ffffff;
  font-size: 15px;
  display: block;
  padding: 0px 20px;
  cursor: pointer;
  text-decoration: none;
}
.el-dropdown-menu a{
  text-decoration: none;
}
/*增强饿了么二级下拉框*/
</style>
